<template>
  <!-- 确认退税 -->
  <el-dialog
    v-model="dialogVisible"
    title="结算申请"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="auto"
      status-icon
      v-loading="loading"
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="结算银行" prop="sellerBankId">
            <el-select
              v-model="ruleForm.sellerBankId"
              size="large"
              class="wh"
              placeholder="请选择结算银行"
            >
              <el-option
                v-for="item in bankList"
                :key="item.id"
                :label="item.bankName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <c-table-template :data="tableData" border>
            <el-table-column label="订单号" prop="orderId" align="center" />
            <el-table-column
              label="车辆信息"
              prop="productInfo"
              align="center"
            />
            <el-table-column
              label="订购数量（辆）"
              prop="productAmount"
              align="center"
            />
            <el-table-column label="订单金额" align="center">
              <template #default="scope">
                {{ scope.row.productCurrency }}
                {{ filters.thousands(scope.row.productSumPrice) }}
              </template>
            </el-table-column>
          </c-table-template>
          <div class="table-footer">
            <span>共选择 {{ tableData.length }} 项 , 共计</span>
            <span style="color: rgb(255, 99, 85)"
              >￥{{ filters.thousands(getSumMoney) }}</span
            >
          </div>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button :loading="buttonLoading" size="large" @click="handleClose"
        >取 消</el-button
      >
      <el-button
        size="large"
        :loading="buttonLoading"
        type="primary"
        @click="handleSubmit"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, getCurrentInstance, computed } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { addition } from "@/utils/compute.js";
const emits = defineEmits(["change"]);
const { proxy } = getCurrentInstance();
const router = useRouter();
const dialogVisible = ref();
const loading = ref(false);
const buttonLoading = ref(false);
const tableData = ref([]);
const ruleForm = ref({});
const ruleFormRef = ref();
const bankList = ref([]);
const getSumMoney = computed(() => {
  return tableData.value.reduce((a, b) => {
    return addition(a, b.productSumPrice);
  }, 0);
});
const handleSubmit = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      buttonLoading.value = true;
      const url = "/sellerSettle/settle";
      try {
        await proxy.$post({ url,data:ruleForm.value });
        ElMessage.success('操作成功')
        handleClose()
        emits('change')
        buttonLoading.value = false;
      } catch (error) {
        buttonLoading.value = false;
      }
    }
  });
};
const handleOpen = async (list) => {
  loading.value = true;
  dialogVisible.value = true;
  try {
    const url = "/sellerBankList/list";
    const res = await proxy.$get({ url });
    bankList.value = res;
    tableData.value = list;
    ruleForm.value.idList = list.map((x) => x.id);
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const handleClose = () => {
  ruleFormRef.value.resetFields();
  dialogVisible.value = false;
};
const rules = ref({
  sellerBankId: [
    {
      required: true,
      message: "请选择结算银行",
      trigger: "change",
    },
  ],
});
defineExpose({
  handleOpen,
});
</script>

<style lang="less" scoped>
.table-footer {
  background: rgb(241, 241, 241);
  color: rgb(32, 32, 32);
  font-size: 14px;
  font-weight: 500;
  border-bottom: var(--el-table-border);
  padding: 12px 16px;
}
</style>